Cách tạo yêu cầu tên miền chéo (Góc 2)?

Question

Cách tạo yêu cầu tên miền chéo bằng Angular 2? Bạn có thể cung cấp một ví dụ không? Yêu cầu giữa localhost: 3000 và localhost: 8000 tên miền chéo? Cảm ơn bạn.

Answer 1

Trong thực tế, không có gì để làm trong Angular2 liên quan đến yêu cầu miền chéo. CORS là thứ được hỗ trợ bởi trình duyệt. Liên kết này có thể giúp bạn hiểu cách hoạt động:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/

Để có ngắn, trong trường hợp yêu cầu miền chéo, trình duyệt sẽ tự động thêm một tiêu đề Origin trong yêu cầu . Có hai trường hợp:

• Yêu cầu đơn giản. Trường hợp sử dụng này được áp dụng nếu chúng tôi sử dụng các phương thức HTTP GET, HEAD và POST. Trong trường hợp phương thức POST, chỉ các loại nội dung có các giá trị sau được hỗ trợ: text/plain, application/x-www-form-urlencoded và multipart/form-data.
• Yêu cầu được yêu cầu trước. Khi trường hợp sử dụng "yêu cầu đơn giản" không áp dụng, yêu cầu đầu tiên (với phương thức HTTP OPTIONS) được thực hiện để kiểm tra những gì có thể được thực hiện trong bối cảnh yêu cầu miền chéo.

Vì vậy, trên thực tế, hầu hết công việc phải được thực hiện ở phía máy chủ để trả về tiêu đề CORS. Cái chính là Access-Control-Allow-Origin.

200 OK HTTP/1.1 
(...) 
Access-Control-Allow-Origin: * 

Để gỡ lỗi các vấn đề này, bạn có thể sử dụng công cụ nhà phát triển trong trình duyệt (tab Mạng).

Về Angular2, chỉ cần sử dụng đối tượng Http giống như bất kỳ các yêu cầu khác (giống miền ví dụ):

return this.http.get('https://angular2.apispark.net/v1/companies/') 
      .map(res => res.json()).subscribe(
    ... 
); 

Answer 2

Đối với tôi đó là một vấn đề khác. Điều này có thể tầm thường đối với một số người, nhưng tôi phải mất một thời gian để tìm ra. Vì vậy, câu trả lời này có thể hữu ích đối với một số người.

Tôi đã có API_BASE_URL được đặt thành localhost:58577. Đồng xu giảm xuống sau khi đọc thông báo lỗi lần thứ triệu. Vấn đề là ở phần mà nó nói rằng nó chỉ hỗ trợ HTTP và một số giao thức khác. Tôi đã phải thay đổi API_BASE_URL để nó bao gồm các giao thức. Vì vậy, việc thay đổi API_BASE_URL thành http://localhost:58577 nó hoạt động hoàn hảo.

Answer 3

Bạn không thể làm gì ở phía khách hàng. Tôi đã thêm @CrossOrigin vào bộ điều khiển ở phía máy chủ và nó hoạt động.

@RestController 
@CrossOrigin(origins = "*") 
public class MyController 

Vui lòng tham khảo docs.

Lin

Answer 4

@RestController 
@RequestMapping(value = "/profile") 
@CrossOrigin(origins="*") 
public class UserProfileController { 

SpringREST cung cấp @CrossOrigin chú thích nơi (nguồn gốc = "*") cho phép truy cập vào các API REST từ bất cứ nguồn nào.

Chúng tôi có thể thêm nó vào API tương ứng hoặc toàn bộ RestController.

Answer 5

Nhiều câu trả lời dài (và chính xác) tại đây. Nhưng thông thường bạn sẽ không làm những điều này bằng tay - ít nhất là không khi bạn thiết lập các dự án đầu tiên của bạn để phát triển (đây là nơi bạn thường vấp phải những thứ này). Nếu bạn sử dụng koa cho backend: sử dụng koa-cors. Cài đặt qua NPM ...

npm install --save koa-cors 

... và sử dụng nó trong các mã:

const cors = require('koa-cors'); 
const Koa = require('koa'); 
const app = new Koa(); 
app.use(cors()); 

vấn đề được giải quyết.

Answer 6

Theo kinh nghiệm của tôi, các plugin hoạt động với http nhưng không hoạt động với httpClient mới nhất. Ngoài ra, cấu hình các tiêu đề respsonse CORS trên máy chủ không thực sự là một lựa chọn. Vì vậy, tôi đã tạo một tệp proxy.conf.json để hoạt động như một máy chủ proxy.

Đọc thêm về vấn đề này ở đây: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

dưới đây là tập tin prox.conf.json tôi

{ 
    "/posts": { 
    "target": "https://example.com", 
    "secure": true, 
    "pathRewrite": { 
    "^/posts": "" 
    }, 
    "changeOrigin": true 
    } 
} 

tôi đặt các tập tin proxy.conf.json ngay bên cạnh các các package.json trong cùng một thư mục

sau đó tôi đã sửa đổi lệnh bắt đầu trong tệp package.json như dưới đây

"start": "ng serve --proxy-config proxy.conf.json" 

bây giờ, cuộc gọi http từ thành phần ứng dụng của tôi là như sau

return this._http.get('/posts/pictures?method=GetPictures') 
.subscribe((returnedStuff) => { 
    console.log(returnedStuff); 
}); 

Cuối cùng để chạy ứng dụng của tôi, tôi sẽ phải sử dụng NPM bắt đầu hoặc ng phục vụ --proxy -config proxy.conf.json